<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2022-11-16 08:08:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-27 16:54:29
 * @FilePath: Header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <el-row class="main-flex">
        <el-col>
          <div class="row school-logo-flex">
            <div class="image-flex-box">
              <!-- <el-image src="https://public.hlzhjy.com/Logo/38.png"></el-image> -->
              <img :src="SchoolInfo.school_logo" alt="">
            </div>
            {{ SchoolInfo.school_name }}
          </div>
        </el-col>
        <!-- 标题 -->
        <el-col>
          <!-- <div class="screen-name-box">
            <el-image :src="require('../../assets/img/titlebg2.png')"></el-image>
          </div> -->
        </el-col>
        <el-col>
          <div class="times-right-box">
            <span>{{ times }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  name: 'Header',
  data() {
    return {
      type: this.$route.query.type,
      times: '',
      TimeStamp: 0,
      dataTime: '',
      fullscreen: false,
      SchoolInfo: {
        school_name: '',
        school_logo: '',
        school_id: '',
      },
      hearderTime: null,
      dailyReloadTimer: null, // 新增：23:30定时刷新定时器
    }
  },
  beforeDestroy() {
    // 取消监听事件
    window.removeEventListener('resize', this.onresize)
    clearInterval(this.hearderTime)
    // 新增：清除23:30刷新定时器
    if (this.dailyReloadTimer) {
      clearTimeout(this.dailyReloadTimer)
    }
  },
  mounted() {
    // 监听事件
    window.addEventListener('resize', this.onresize)
    this.getShool()
    this.getTimes()
    this.hearderTime = setInterval(async () => {
      this.TimeStamp++
      // this.timeDataOld = this.$util.getNowData(this.TimeStamp)
      this.$emit('setSimeDataOld', this.$util.getNowData(this.TimeStamp))
      this.setTimeData(`${this.$util.getNowData(this.TimeStamp)} ${this.$util.getNowTime2(this.TimeStamp)}`) // 存储当前时间 时分秒
      this.times = `${this.$util.getNowData2(this.TimeStamp)} ${this.$util.getNowTime(this.TimeStamp)}`
      this.setHeaderShowTime(this.times)
    }, 1000)
    // 新增：启动23:30自动刷新任务
    this.initDailyReload()
  },
  methods: {
    ...mapActions([
      'setTimeData',
      'setHeaderShowTime'
    ]),
    // 调整：将目标时间改为每天早上05:30:00
    initDailyReload() {
      const now = new Date()
      // 构造当天早上05:30:00的时间对象（原16:49:00改为5:30:0）
      const targetTime = new Date(
        now.getFullYear(),
        now.getMonth(),
        now.getDate(),
        5, 30, 0 // 修改点：小时5，分钟30，秒0
      )

      // 计算时间差（若当前已过05:30，则目标时间设为次日05:30）
      let delay = targetTime.getTime() - now.getTime()
      if (delay <= 0) {
        delay += 24 * 60 * 60 * 1000 // 加24小时
      }

      this.dailyReloadTimer = setTimeout(() => {
        location.reload() // 刷新页面
        this.initDailyReload() // 刷新后重新初始化定时器（确保次日生效）
      }, delay)
    },
    async getTimes() {
      const { data: res } = await this.$http.post('/TimeStamp')
      if (res.code !== 1) return this.$message.error(res.msg)
      this.TimeStamp = JSON.parse(res.data.time)
      // this.timeDataOld = this.$util.getNowData(this.TimeStamp)
      this.$emit('setSimeDataOld', this.$util.getNowData(this.TimeStamp))
      this.setTimeData(`${this.$util.getNowData(this.TimeStamp)} ${this.$util.getNowTime2(this.TimeStamp)}`) // 存储当前时间 时分秒
      this.times = `${this.$util.getNowData2(this.TimeStamp)} ${this.$util.getNowTime(this.TimeStamp)}`
      this.setHeaderShowTime(this.times)
    },
    async getShool() {
      const { data: res } = await this.$http.get('/SchoolUser/School/')
      if (res.code !== 1) return this.$message.error(res.msg)
      Object.keys(res.data).forEach(item => {
        if (item.indexOf('-') !== -1) {
          if (Number(item.split('-')[0]) === 1) {
            // 获取学校的id 如果id是77，也就是未来学校，就把外出状态放出来
            this.SchoolInfo.school_id = res.data[item]
          } else if (Number(item.split('-')[0]) === 2) {
            this.SchoolInfo.school_name = res.data[item]
          } else if (Number(item.split('-')[0]) === 11) {
            this.SchoolInfo.school_logo = res.data[item]
          }
        }
      })
    },
    // 监听是否全屏状态
    onresize(event) {
      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
      var winFlag = window.innerHeight === window.screen.height
      // 利用window全屏标识来判断 -- IE无效
      var isFull = window.fullScreen || document.webkitIsFullScreen
      if (isFull === undefined) {
        this.fullscreen = winFlag
      } else {
        this.fullscreen = winFlag || isFull
      }
    },
    screen() {
      var element = document.documentElement
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen
    }
  }
}
</script>
<style lang="less" scoped>
.main-flex {
  height: 88px;
  position: relative;
  box-sizing: border-box;
  background: url('../../assets/img/biaoti.png') no-repeat;
  background-size: cover;
  padding: 0 40px;
  display: flex;

  .school-logo-flex {
    margin-top: 15px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;

    .image-flex-box {
      width: 40px;
      height: 40px;
      margin-right: 20px;
      border-radius: 50%;
      background-color: #fff;

      img {
        width: 40px;
        height: 40px;
      }
    }
  }

  .screen-name-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 586px;
    height: 115px;
    position: relative;
    margin-top: -5px;

    .el-image {
      height: 115px;
    }
  }

  .times-right-box {
    margin-top: 20px;
    text-align: right;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>

